<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全屏布局 - 后台管理界面的布局</title>
  <style>
  body, h1 {
    margin: 0;
  }
  .app {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: lightblue;
  }
  .app header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    color: #eee;
    background-color: #000;
  }
  .app .container {
    box-sizing: border-box;
    padding-top: 60px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: antiquewhite;
  }
  .app .container .left {
    float: left;
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    height: 100%;
    overflow: auto;
    background-color: lightcoral;
  }
  .app .container .main {
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    overflow: auto;
    background-color: lightgreen;
  }
  </style>
</head>
<body>
  <div class="app">
    <header>
      <h1>顶部菜单栏</h1>
    </header>
    <div class="container">
      <aside class="left">
        侧边栏
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum hic voluptates quisquam aperiam obcaecati iste vitae tempora, perspiciatis laudantium alias magnam quis blanditiis adipisci doloribus consequatur ducimus, harum nam repudiandae sequi fuga ratione nobis qui nostrum recusandae? Cupiditate esse, rem alias voluptates assumenda, veritatis voluptas vel consequuntur earum accusantium possimus eum similique quasi! Error ut, odit ipsum, accusantium sunt amet cumque, suscipit modi vel minus numquam illum velit voluptatem dolor veritatis! Maxime architecto voluptatem consequatur, voluptatum commodi asperiores sit dolorum facere debitis nulla, nisi nemo. Consequuntur placeat ipsum architecto quibusdam voluptatem esse. Fugiat est sint, quam mollitia accusamus enim debitis quod ratione, eveniet dignissimos libero deleniti cupiditate pariatur odit excepturi illum unde. Quos ducimus assumenda deserunt dolores eveniet nisi harum ut, sint aut ab ratione repudiandae? Illo voluptates ex alias sunt tempore autem animi odio aut commodi quasi iste dolores modi quos nesciunt vero obcaecati officia architecto non, rerum velit nobis natus aperiam quis laboriosam. Perferendis, non odio laborum accusamus possimus officia nam pariatur nostrum eligendi ipsa porro corporis aliquid ad ut quam est, molestias repellat impedit sit? Ab consequatur necessitatibus eligendi, optio quas earum eum? Sint, sit! Impedit deserunt nulla exercitationem maiores distinctio voluptas? Accusantium qui aspernatur eius natus saepe maxime placeat sit odio maiores vitae blanditiis odit quaerat dignissimos error quasi reiciendis, aliquid, dolor perspiciatis nam magnam. Ad eum quo modi laborum rem. Quae numquam suscipit quaerat ut quam omnis natus saepe et eveniet sint tempora iste dicta, ab ipsam aspernatur doloremque molestias itaque commodi eum atque ratione quas accusamus similique corrupti! Reiciendis voluptas molestiae voluptate assumenda. Blanditiis quaerat, ullam maxime, totam modi quis facilis deleniti suscipit accusantium atque, eaque impedit! Maiores qui, nemo est ducimus non officiis laboriosam commodi cumque iusto sequi. Saepe, odit itaque eaque labore debitis ex harum doloremque earum amet beatae nesciunt quo dolore dolores ipsa corporis rem tenetur et rerum blanditiis deleniti nobis quisquam. Enim sit asperiores molestiae autem ullam? Est dolores veniam quis minus ab impedit dolore tempora ipsum animi ducimus facilis praesentium unde quo in fugit expedita inventore hic libero, harum molestiae veritatis officia? Quam reprehenderit enim excepturi corporis fugiat ratione at incidunt. Ullam, perferendis voluptate debitis explicabo ex quam in magni officiis nemo dolore omnis beatae eum, cumque sed amet sequi quod? Quasi temporibus est in beatae velit pariatur, debitis reiciendis assumenda quia optio incidunt ipsam adipisci obcaecati. Totam suscipit ratione quisquam dignissimos iste impedit, voluptates voluptas quo facilis ducimus. Vitae nulla asperiores labore? Dolores, voluptatibus nihil sit consequuntur deserunt pariatur commodi reprehenderit odio voluptatem reiciendis eius aliquid assumenda modi voluptas accusamus voluptate ratione facilis! Quis ut perferendis doloremque facere similique, quod ex assumenda obcaecati sunt nihil provident quidem animi rerum accusantium et amet culpa tenetur perspiciatis neque vitae, aut corrupti! Eius autem placeat aliquid mollitia tempore minima atque molestiae quaerat doloremque delectus, iure voluptatibus fugit quos voluptatem accusamus, cumque quo repudiandae fugiat pariatur cum! Nisi sit labore maiores, ipsa totam distinctio optio praesentium! Atque beatae tempora ipsa voluptatum dolore facilis ex deleniti est iusto, possimus delectus, incidunt itaque ab eum explicabo sapiente. Aperiam, assumenda! Architecto, maiores veniam distinctio id ducimus fugiat non in, odit deleniti tenetur repellat. Quidem, aspernatur quaerat? Corrupti quam delectus blanditiis dolore quos quas officia possimus voluptate provident nostrum excepturi vel porro, nam quibusdam dolor asperiores labore accusamus ea. Optio sunt unde odio mollitia quo, voluptatem sit minima iste maiores placeat autem dicta eos adipisci. Aspernatur nam aliquid libero fuga quis illum consectetur omnis, molestiae consequuntur eius cupiditate itaque reiciendis impedit praesentium, explicabo id maiores voluptatem eligendi odio laboriosam. Perferendis, officiis. Quae repellendus quis assumenda, impedit deleniti est hic rem eligendi. Cumque veritatis, minima explicabo quod, harum deleniti voluptates dolorem temporibus accusantium esse at eos praesentium cupiditate mollitia iure nobis ullam reprehenderit animi minus quia doloremque? Assumenda officiis asperiores vitae iure dolores expedita omnis iusto nihil, fugit, velit veniam necessitatibus quibusdam voluptatem fugiat corporis temporibus unde ducimus numquam esse. Nam sint vitae aliquam veritatis in! Vel ullam consectetur earum, perferendis placeat nesciunt! Similique perferendis omnis aut velit odit nostrum ducimus, labore quod voluptatum molestiae iste eveniet deleniti libero illum fuga enim expedita quasi at saepe, ipsa nam quos id. Sunt, enim vel quis repudiandae officia expedita exercitationem amet dolorem, dolore delectus fuga eligendi consequatur accusantium repellendus mollitia. Quaerat voluptatibus corporis optio ducimus minima error placeat fugiat vel, laboriosam veniam omnis, quos veritatis eum iste blanditiis nobis perferendis sed repellendus iusto similique laudantium ratione nisi? Earum, quasi placeat! Quas eaque necessitatibus in dignissimos nemo explicabo modi perferendis odit earum atque nam exercitationem optio eligendi consectetur deleniti illum, magnam sed porro similique vel sunt dicta reiciendis a. Beatae libero sint tenetur accusamus quae. Consectetur, atque odit, aut amet eaque id, autem libero quam vero sed repellendus. Quaerat iusto ab tempore maxime at ipsum, natus, a rerum vel voluptates, repudiandae qui molestiae error consequatur. Magnam nostrum natus, cupiditate illum velit sed ad, quia commodi, ab officiis consequatur quisquam iusto dolor earum voluptatum vitae reprehenderit dolorum voluptas! Cumque deleniti minima amet? Reprehenderit iure harum suscipit sed neque ratione doloribus expedita maxime, ab veniam asperiores nesciunt. Praesentium quibusdam incidunt doloremque repellendus cumque, totam sunt consectetur aut? Itaque impedit non, vitae quae commodi error reiciendis tempora ducimus cupiditate a? Reiciendis repellendus laboriosam, velit aspernatur quo porro assumenda eum suscipit minus dolorem officiis ipsa aut similique voluptate dolorum quidem possimus iusto perferendis ratione, dolor officia vero voluptatibus voluptates eveniet. Distinctio eaque facilis nemo iste nobis a tempora dolore totam architecto sint eius fugit quas, facere quam cupiditate corrupti numquam repudiandae natus tenetur explicabo, excepturi et qui. Vitae illo eveniet id doloremque, et natus aliquid iste non libero culpa deserunt. Laborum quia eveniet aut placeat saepe, nam quibusdam repudiandae voluptatem temporibus consequuntur, iste totam in laboriosam harum aspernatur voluptatibus commodi quidem expedita hic veritatis ab doloremque impedit? Quos qui quisquam aspernatur nulla possimus nesciunt totam mollitia nemo aperiam eos, natus optio vitae fugiat nostrum sit quia, quae corporis. Delectus molestias nisi provident praesentium soluta eligendi ducimus deleniti explicabo, debitis esse, quam porro! Doloremque eos necessitatibus at praesentium possimus temporibus mollitia molestiae similique harum sint?
      </aside>
      <div class="main">
        主区域
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit, velit ex delectus repellat molestias inventore quia, praesentium dolore rem iusto aliquid rerum natus, ipsum exercitationem fugiat illum dolores iure! Dolores quae dolor unde culpa facere. Nesciunt id deserunt eligendi ipsum nostrum porro voluptates consequatur exercitationem ducimus atque magni, perspiciatis, vel quaerat libero. Itaque, expedita quidem sint eveniet veritatis praesentium, quibusdam commodi soluta maiores odit temporibus quis nisi. Eligendi, asperiores minima alias eveniet officiis corporis ex corrupti odit totam molestiae velit natus nobis esse eos? Dolorem excepturi quia adipisci porro, recusandae temporibus nesciunt optio corporis cum fugit cupiditate molestiae voluptatem quisquam ex voluptatum modi totam sunt enim blanditiis expedita ipsam earum, tempore quis possimus. Facilis ad sunt ut dicta, velit nesciunt architecto inventore necessitatibus omnis, doloremque maiores laborum rem ipsa itaque ex perspiciatis laudantium nam deleniti a odit modi obcaecati. Voluptas officia fugit, facere sequi explicabo alias libero vel voluptatem consequuntur molestias, ipsa quisquam voluptatum nobis quam placeat accusantium eligendi veritatis nulla repellat accusamus tempore quasi ut iste laudantium. Ipsum totam dicta magnam sed fugit exercitationem. Harum amet neque nam et repellat numquam placeat aliquam doloremque veritatis. Soluta, architecto tenetur optio consectetur similique dolor ab fugiat rerum atque excepturi eveniet sint. Sequi iure quibusdam dicta voluptates sunt deserunt nisi sed fuga, ullam ratione non dolores alias, vel numquam. Ipsam maiores odio soluta, ipsa iusto quaerat explicabo nihil voluptatibus consequuntur vitae ullam repellat ab laudantium iste doloremque illo cupiditate omnis rem nulla, officia voluptates suscipit veniam accusantium. Atque quibusdam illo nobis? Voluptate, quasi totam laboriosam, laborum doloribus accusamus non aperiam culpa dolorum vel beatae quos blanditiis molestias voluptatem quis tenetur consequatur accusantium consequuntur quae quibusdam atque numquam laudantium? Natus odio aut eligendi magnam ut laboriosam cumque maxime omnis iste accusamus quam, vel fugit nemo amet. Molestiae tenetur natus in cum iure. Aut optio amet magnam commodi debitis facere eius consequatur ex accusantium! Nesciunt ab sint unde cumque, sapiente possimus aliquam quia repellat quo numquam culpa voluptatibus alias magnam earum commodi est minus eligendi pariatur eveniet assumenda voluptatum porro. Nesciunt officia id magni officiis quos possimus deserunt sunt ducimus laboriosam, quis minus cum corrupti tempore animi, veritatis expedita consequuntur tempora molestiae. Quisquam veritatis, omnis sequi molestiae eos, dolorem fuga expedita nam, eveniet sint est iste deleniti numquam libero iure quae doloremque temporibus! Quod facere enim harum. Sequi beatae similique quidem commodi temporibus quo qui suscipit aut provident fugiat nesciunt neque sunt dolore, quasi aliquid rem, aspernatur, libero totam! Voluptatem odit consequatur sint facere unde eos optio mollitia commodi suscipit beatae, hic natus maxime explicabo fuga non fugiat in obcaecati quae saepe officia, magnam illo. Rem expedita veniam amet quibusdam voluptas autem repellat. Exercitationem nostrum ratione repellendus necessitatibus voluptatibus veniam? Quae facere molestiae velit fuga culpa? Debitis harum eveniet incidunt ut ducimus iusto magnam earum qui dolorum hic iste repudiandae amet totam accusantium ea, nisi ratione distinctio quasi sed optio commodi culpa nostrum voluptas quo. Totam esse, asperiores quo alias magni aperiam repellendus porro magnam voluptates, dolor obcaecati. Dolores corrupti explicabo, sequi iste quo cum magni tenetur eos earum? Illo, dolore molestias ipsa vel assumenda in sit fuga consequatur, repellat maiores ea ad nesciunt alias velit excepturi voluptatem consequuntur accusantium perspiciatis quaerat atque rem nihil nobis labore. A, eaque. Explicabo, voluptates. Error deleniti ducimus et dicta iusto dolores aperiam soluta necessitatibus aliquid, quia quasi perspiciatis sequi id illo quis consequatur. Non, ad vitae! Laborum iste libero doloribus delectus autem, similique magnam ut perferendis reiciendis inventore quisquam maxime eaque ipsum sunt. Reprehenderit dolorum exercitationem, beatae atque est recusandae iure assumenda omnis nostrum sapiente sed, odio nulla distinctio ipsa. Quisquam rerum velit, labore a explicabo alias id ex beatae ipsa magnam dolorem enim voluptatum voluptatem. Ipsum neque rem earum iusto culpa. Obcaecati ratione corrupti molestias molestiae incidunt sit error fugit nisi est. Veniam facere maxime fuga ipsam. Molestiae quis totam sint voluptates corrupti necessitatibus perferendis explicabo, distinctio ea doloremque recusandae et magnam, iure ipsam consequatur accusamus fugiat eveniet tenetur nemo odit illum possimus aspernatur, voluptate voluptatibus. Itaque possimus soluta amet, vitae doloremque ab iure quae libero eaque minus. Sequi eius sed saepe ex? Quaerat delectus tempore explicabo ab vel, quod natus quibusdam eligendi, corporis quidem quis. Recusandae ducimus perspiciatis possimus voluptate at qui saepe et nihil corporis, deleniti illum sed odio quibusdam suscipit, perferendis, in ex delectus. Libero nulla cum tempora incidunt nesciunt inventore eligendi optio nisi dolorum iure quae, animi impedit officia voluptas suscipit delectus soluta alias neque voluptatibus quos velit laudantium. Odio necessitatibus dignissimos hic aliquid voluptates, modi praesentium temporibus autem voluptatum reprehenderit illum assumenda commodi odit non. Veniam reiciendis at quas nisi repellendus reprehenderit dolores consequatur laborum vel, fugit sunt debitis est repellat totam itaque consequuntur tempora beatae nesciunt velit corrupti vitae ipsa. Dolorum magni temporibus ab sunt quia beatae voluptas illum quos sed? Sed cupiditate autem eveniet tenetur praesentium accusamus. Doloremque illum impedit nulla atque quasi velit eaque repellendus similique quae vel earum illo veritatis accusantium ipsam unde, quas eligendi est, assumenda debitis quisquam eum doloribus nam saepe. Necessitatibus, ratione nulla? Dolor explicabo in dignissimos culpa velit soluta rem aut quam commodi esse repudiandae cum rerum repellendus repellat a, sapiente eveniet? Eligendi reprehenderit possimus magnam sequi rerum quis consequuntur natus. Culpa nostrum quas animi. Et quaerat, praesentium obcaecati vel voluptatibus quae ipsam quibusdam commodi eaque amet maiores dicta voluptate harum dolor aspernatur modi iste laboriosam voluptas nobis eius veritatis. Voluptates aut atque rem magni? Nobis molestiae dignissimos obcaecati voluptas omnis ratione earum, voluptates nemo dicta asperiores expedita reiciendis esse culpa soluta saepe iste illum iure ullam mollitia, similique eveniet eum? Aut, quia? Sequi officia sapiente asperiores, repellat odit cumque fugit beatae dolorem hic sed. Alias, libero sequi aspernatur facilis a illum eos exercitationem cum repellendus, possimus necessitatibus placeat recusandae hic quisquam commodi voluptatum delectus ipsa eveniet sapiente dicta quo magni accusamus iure. Suscipit, itaque dolorem hic accusamus corporis corrupti nemo, consectetur repellat, ipsum doloribus accusantium velit ea minima. Impedit a harum non, accusamus sed sunt quaerat eius provident veritatis voluptatem ea esse perspiciatis quisquam totam pariatur blanditiis illo natus reiciendis! Necessitatibus, quia?
      </div>
    </div>
  </div>
</body>
</html>